<template>
	<view class="page">


		<view class="page-content">
			<xg-tab-title class="cate-tab-title-list" :vertical="true">
				<xg-tab-title-item v-for="(cateTabTitle, cateTabTitleIndex) of cateTabTitles" :key="cateTabTitleIndex">
					<view class="cate-tab-title"
						:class="{'cate-tab-title-selected': titleCurrentIndex === cateTabTitleIndex,
						 'cate-tab-title-last': (titleCurrentIndex - 1) === cateTabTitleIndex, 'cate-tab-title-next': (titleCurrentIndex + 1) === cateTabTitleIndex}"
						@tap="cateTitleTap(cateTabTitleIndex)">
						<text class="cate-tab-title-text"
							:class="{'cate-tab-title-text-selected': titleCurrentIndex === cateTabTitleIndex}">{{cateTabTitle}}</text>
					</view>
				</xg-tab-title-item>
			</xg-tab-title>

			<xg-list class="bg-color-white cate-tab-content"
				:class="{'border-top-left-radius-common': titleCurrentIndex !== 0}" :scroll-y="true"
				:show-scrollbar="false">
				<xg-list-item v-for="(cate, cate_index) of cates" :key="cate_index">
					<view class="cate_box" v-if="titleCurrentIndex === cate_index">
						<!-- 二级标签 -->
						<view class="cate-list">
							<view class="margin-top-lg cate-level1"
								v-for="(cate_level1, cate_level1_index) of cate.children" :key="cate_level1_index">
								<text class="font1">{{cate_level1.name}}</text>
								<!-- 三级标签 -->
								<view class="">
									<view v-for="(cate_level2, cate_level2_index) of cate_level1.children"
										:key="cate_level2_index">
										
											<view class="font2" @tap="tap1(cate_level2.url)">{{cate_level2.name}}123123 <image src="../../static/images/navigator-1.png" class="imagenav"></image></view>
											
									
									</view>
								</view>
							</view>
						</view>
					</view>

				</xg-list-item>
			</xg-list>
		</view>


		<!-- #ifdef H5 -->
		<view class="tab-bar"></view>
		<!-- #endif -->
	</view>
</template>

<script>
	import data from '@/data/cate/cate';
	import config from './config';

	export default {
		mixins: [config],
		data() {
			return {
				titleCurrentIndex: 0,
				cateTabTitles: [],
				cates: [],
				url:''
			};
		},
		async onLoad(id) {
			console.log(id)
			const catesPromise = data.cates();
			const cateTabTitlesPromise = data.cateTabTitles();
			
			this.cateTabTitles = await cateTabTitlesPromise;
			this.cates = await catesPromise;
		},
		// #ifndef MP-WEIXIN
		onNavigationBarButtonTap(e) {
			const index = e.index;

			//点击导航栏消息按钮
			if (1 === index) {
				uni.navigateTo({
					url: '/pages/message/list',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				return;
			}
		},
		// #endif

		methods: {
			cateTitleTap(index) {
				this.titleCurrentIndex = index;
			},
			// 点击科室链接跳转
			tap1(url){
			if(!url){
				uni.showToast({title: '模板未包含此页面',icon:"none"});
				return;
			}
			uni.navigateTo({
				url:url
			})
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	.tab-bar {
		height: var(--window-bottom);
	}

	/* #endif */


	.page {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		right: 0;
		bottom: 0;
		left: 0;

		// @include flex-layout(column);
	}

	.nav-bar {
		/* #ifndef APP-NVUE */
		z-index: 1000;
		/* #endif */
	}

	.nav-bar-search-bar {
		// width: 500rpx;
	}

	.page-content {
		flex: 1;
		
	}

	$border-radius-common: 0rpx;

	.border-top-left-radius-common {
		border-top-left-radius: $border-radius-common;
	}

	// .border-top-right-radius-common {
	// 	border-top-right-radius: $border-radius-common;
	// }
	// 左侧标题区
	$tab-title-width: 180rpx;
	$tab-content-width: 751rpx - $tab-title-width;

	.cate-tab-title-list {
		width: $tab-title-width;
		position: absolute;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		top: 0;
		bottom: 0;
		left: 0;

		background-color: #f1f2f5;
	}

	.cate-tab-title {
		// @include flex-layout(row, center, center);

		height: 80rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f1f2f5;
	}

	.cate-tab-title-text {
		font-size: 30rpx;
		text-align: center;
		color: #999999;
	}

	.cate-tab-title-last {
		border-bottom-right-radius: $border-radius-common;
	}

	.cate-tab-title-next {
		border-top-right-radius: $border-radius-common;
	}

	.cate-tab-title-selected {
		background-color: $uni-color-white;
	}

	.cate-tab-title-text-selected {
		font-size: 30rpx;
		// font-weight: bold;
		color: $text-color-black;
	}

	// 右侧内容区
	.cate-tab-content {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: $tab-content-width;
		background-color: $uni-color-white;
		border-top-right-radius: $border-radius-common;
	}

	.cate_box {
		margin: $uni-spacing-row-base $uni-spacing-col-lg;
	}

	$slideshow-item-image-width: 750rpx - $tab-title-width - 2*$uni-spacing-col-lg;
	$slideshow-item-image-height: $slideshow-item-image-width*7/16;

	.slideshow-swiper {
		height: $slideshow-item-image-height;
	}

	.slideshow-item {
		// @include flex-layout(row, center, center);
	}

	.slideshow-item-image {
		width: $slideshow-item-image-width;
		height: $slideshow-item-image-height;
	}

	.cate-list {
		// position: absolute;
		width: 100%;
		
		.font1{
			margin: 20rpx;
		}
		.font2{
			margin: 40rpx;
			width: 100%;
			border-bottom: 1rpx solid #f1f2f5;
		}
		.imagenav{
			// position: relative;
			// left: 180rpx;
			// top: 15rpx;
			margin:auto 15rpx;
			float: right;
			// text-align: center;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			width: 50rpx;
			height: 50rpx;
	}
	}
	.liebiao{
		
	}
	

	.cate-level1 {
		// display: flex;
	}

	.cate-level2 {
		// @include flex-layout(column, center, center);
	}

	.cate-level2-image {
		width: 150rpx;
		height: 150rpx;
	}
</style>
